<!doctype html>
<html>
<head>
<title>GQuery Effects Sample</title>
<script language="javascript" src="ColorEffectsSample.nocache.js"></script>
<style type="text/css">
body {
    font-family: Helvetica;
}

.reset {
    float: left;
}

.foo {
    margin-top: 100px;
    margin-bottom: 100px; width : 100%;
    color: white;
    font-size: 60px;
    text-align: center;
    width: 100%;
}

.bar {
    border: solid 10px black;
    border-left-color: silver;
    border-right-color: silver;
    width : 200px;
    height: 200px;
    padding-top: 70px;
    font-size: 30px;
    text-align: center;
    width: 200px;
}
</style>
</head>
<body>
<h1>Animate css color properties</h1>
<p>This example shows you how using gwtquery to perform animation on
color css properties (backgroundColor, color, corderColor...). Have a look at the <a href="http://code.google.com/p/gwtquery/source/browse/trunk/samples/src/main/java/gwtquery/samples/client/effects/ColorEffectsSample.java">java code</a></p>
<div>
<button id="shoot">Shoot This page!</button>
</div>
<div class="foo">BANG !</div>
<div>
<button id="startAnim2">Start animation</button>
<button id="resetAnim2">Reset animation</button>
</div>
<div class="bar">GwtQuery</div>
</body>
</html>
